<template>
  <div
      class="bg-white rounded-lg p-3.75 mb-2 shadow-sm w-11/12 mx-auto cursor-pointer hover:shadow-md transition-shadow"
      @click="goToRestaurant"
  >
  <!-- 订单卡片内容（保持不变） -->
  <div class="flex items-start justify-between pb-1 border-b border-gray-200 mb-2">
    <div class="flex items-center">
      <img
          :src="order.shop.image"
          class="w-8 h-8 rounded mr-5"
          @error="handleImageError"
          alt="商家图片"
      />
      <h3 class="text-sm font-bold truncate">{{ order.shop.name }}</h3>
    </div>
    <span class="text-blue-500 text-xs">{{ order.status }}</span>
  </div>

  <span class="text-xs px-2 py-1 rounded-full" :class="statusClass">
      {{ statusText }}
    </span>

  <div class="text-xs text-gray-600 mb-2">
    <div
        v-for="(dish, index) in order.dishes.slice(0, 2)"
        :key="index"
        class="flex justify-between"
    >
      <span class="truncate">{{ dish.name }}</span>
      <span>¥{{ formatPrice(dish.price) }}</span>
    </div>
    <span v-if="order.dishes.length > 2" class="text-gray-400">...</span>
  </div>

  <div class="text-right text-sm font-bold text-red-500">
    ¥{{ formatPrice(order.total) }}
  </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import defaultShopImage from '@/assets/default-restaurant.jpg'

const props = defineProps({
  order: Object
})

const router = useRouter()

// 状态样式和文本（保持不变）
const statusClass = computed(() => ({
  'paid': 'bg-green-100 text-green-800',
  'completed': 'bg-blue-100 text-blue-800',
  'cancelled': 'bg-red-100 text-red-800',
}[props.order.status] || 'bg-gray-100 text-gray-800'))

const statusText = computed(() => ({
  'paid': '已支付',
  'completed': '已完成',
  'cancelled': '已取消',
}[props.order.status] || props.order.status))

// 工具方法：安全格式化价格
const formatPrice = (price) => {
  const num = Number(price)
  return isNaN(num) ? '0.00' : num.toFixed(2)
}

const handleImageError = (e) => {
  e.target.src = defaultShopImage
}

// 直接跳转到商家详情（移除订单详情逻辑）
const goToRestaurant = () => {
  if (!props.order.shop?.id) {
    console.error('商家 ID 不存在，无法跳转')
    return
  }
  router.push({
    name: 'restaurantDetail', // 确保路由名称正确
    params: { id: props.order.shop.id }
  })
}
</script>